<template>

	<view class="content">
		<view class="body_head" click="backurl">
			<text class="icon-fanhui iconfont"></text> 借款
		</view>
		
		<view class="vluebox">
			<view class="vlue_tit"> 借款金额 </view>
			<view class="vlue_m line">
				￥ {{money}}
			</view>
			<view class="vlue_tip">
				按月还利息，提前还款无手续费
			</view>
		</view>
		
		<view class="vluebox">
			<view class="vlue_more line">
				<view class="value_l"> 借款人 </view>
				<view class="value_r"> {{name}} </view>
			</view>
			
			<view class="vlue_more line">
				<view class="value_l"> 身份证号 </view>
				<view class="value_r"> {{uid}} </view>
			</view>
			
			<view class="vlue_more line">
				<view class="value_l"> 手机号 </view>
				<view class="value_r"> {{mobile}} </view>
			</view>
			
			<view class="vlue_more line">
				<view class="value_l"> 借多久 </view>
				<view class="value_r">
					<picker @change="bindPickerChange" :value="index" :range="array">
						{{arrayt_t}} <text class="icon-xiayiyeqianjinchakangengduo iconfont"></text> 
					</picker>
				</view>
			</view>
			
			<view class="vlue_mores ">
				<view class="values_l">还款详情 </view>
				<view class="values_r"> 
					<view>等额本息 每月还款 {{monthly}} </view>
					<view>本金  {{money}}  利息  {{total}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="vluebox">
			<view class="vlue_more line">
				<view class="value_l"> 借款用途 </view>
				<view class="value_r"> 个人日常消费 </view>
			</view>
			
			<view class="vlue_more ">
				<view class="value_l"> 借款详情 </view>
				<view class="value_r"> 服务平台为金融机构 </view>
			</view>
			
		</view>
		
		
		<view class="footer_btn" @click="submits">
			确 认
		</view>


	</view>

</template>

<script>
	import { curl } from 'common/api.js';
	export default {
		data() {
			return {
				name:'',
				mobile:'',
				money:'',
				array:['6个月','12个月','24个月','36个月','60个月'],
				arrayt_t:'6个月',
				monthly:'',
				total:'',
				uid:''
			}
		},
		onLoad(ret) {
			this.name=ret.name;
			this.mobile=ret.mobile;
			this.money=ret.money;
			this.uid=ret.uid;
			
			var that=this;
			
			curl('daikuan/index',{money:ret.money}).then((res)=>{
					console.log('************');
					console.log(res);
				that.monthly=res.data.monthly;
				that.total=res.data.total;	
				
			});

		},
		methods: {
			
			submits(){
				var money=this.money;
				var name=this.name;
				var mobile=this.mobile;
				var monthly=this.monthly;
				var total=this.total;
				var arrayt_t=this.arrayt_t;
				var uid=this.uid;
				curl('daikuan/submits',{
					money:money,
					name:name,
					mobile:mobile,
					total:total,
					arrayt_t:arrayt_t,
					monthly:monthly,
					uid:uid
					}).then((res)=>{
						
						console.log('************');
						console.log(res);
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
						setTimeout(function(){
							
							uni.navigateTo({
								url:"/pages/jump/huoma?id="+res.data
							})
							
						},900)
					
				});
				
				
				
			},
			bindPickerChange(ret){
				var that=this;
				var index=ret.detail.value;
				var arr=this.array;
				
				console.log(arr[index])
				
				this.arrayt_t=arr[index];
				var money=this.money;
				
				
				uni.showLoading();
				
				curl('daikuan/index',{money:money,month:this.arrayt_t}).then((res)=>{
						console.log('************');
						console.log(res);
						
						uni.hideLoading();
						
					that.monthly=res.data.monthly;
					that.total=res.data.total;	
					
				});
				
				
			}
		}
	}
</script>

<style>
	
	.values_r{
		width: 480rpx;
		font-size: 24rpx;
		text-align: right;
	}
	.values_l{
		font-size: 28rpx;
		text-align: left;
	}
	.vlue_mores{
		width: 660rpx;
		height:140rpx;margin: auto;
		display: flex;align-items: center;
		justify-content: space-between;
	}
	.value_r{
		width: 480rpx;
		font-size: 28rpx;
		text-align: right;
	}
	
	.value_l{
		width: 160rpx;
		font-size: 28rpx;
		text-align: left;
	}
	.vlue_more{
		width: 660rpx;
		height: 110rpx;margin: auto;
		display: flex;align-items: center;
		justify-content: space-around;
		font-size: 28rpx;color: #333;
	}
	
	.vlue_tip{
		width: 670rpx;
		height: 80rpx;margin: auto;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: #444;
	}
	.line{
		border-bottom: 1px solid #ececec;
	}
	.vlue_m{
		width: 670rpx;
		height: 90rpx;margin: auto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 90rpx;
	}
	
	.vlue_tit{
		width: 660rpx;
		height: 90rpx;
		margin: auto;
		font-size: 26rpx;
		line-height: 90rpx;
	}
	.vluebox{
		width: 700rpx;height:auto;
		background: #ffffff;
		border-radius: 10rpx;
		margin:20rpx auto;
	}
	.body_head>text {
		color: #ffffff;
		font-weight: bold;
		font-size: 30rpx;
	}

	.body_head {
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin: auto;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #ffffff;
	}


	
	.footer_btn{
		width: 700rpx;height:90rpx;
		margin:100rpx auto;
		background: #00d229;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		border-radius: 10rpx;
	}
</style>